<template>
  <view class="container">
    <u-navbar
        title="主页"
        :autoBack="false"
        bgColor="transparent"
        leftIcon=""
        :safeAreaInsetTop="true"
        rightIconColor="#FFFFFF"
        titleStyle="color:#FFFFFF; font-size: 32rpx; font-weight: 600;"
    >
    </u-navbar>
    <view class="notice-bar-container">
      <u-notice-bar :text="list" mode="link" class="notice-bar" style="background:linear-gradient(151deg, #6e8efb, #a777e3); "></u-notice-bar>
    </view>
    <view class="content">
      <view class="title-container">
        <span class="title">社区事件上报系统</span>
      </view>
      <u-divider></u-divider>
      <u-grid :col="2" class="grid-container">
        <u-grid-item @click="clickTab(1)">
          <u-icon name="server-man" :size="46" class="grid-icon"></u-icon>
          <view class="grid-text">事件申报</view>
        </u-grid-item>
        <u-grid-item @click="clickTab(2)">
          <u-icon name="order" :size="46" class="grid-icon"></u-icon>
          <view class="grid-text">申报列表</view>
        </u-grid-item>
        <u-grid-item @click="clickTab(3)">
          <u-icon name="account" :size="46" class="grid-icon"></u-icon>
          <view class="grid-text">个人中心</view>
        </u-grid-item>
        <u-grid-item @click="clickTab(4)">
          <u-icon name="setting" :size="46" class="grid-icon"></u-icon>
          <view class="grid-text">设置中心</view>
        </u-grid-item>
      </u-grid>

    </view>

    <div style="color: white;padding: 0rpx 40rpx">
      <h3>小区新闻</h3>
    </div>
    <view class="notice-content">
      <div id="notice-board" style="overflow: scroll;height: 500rpx">
        <div class="notice-item">
          <p class="notice-title">小区环境美化项目启动</p>
          <p>通知居民小区将于下周一开始进行绿化带升级工程，期间部分区域将临时封闭，请居民绕行并注意安全。</p>
          <p class="notice-date">发布时间：2023-04-15 12:01:22</p>
        </div>

        <div class="notice-item">
          <p class="notice-title">垃圾分类指南更新</p>
          <p>为了响应环保政策，小区新增了可回收物智能分类箱，附带最新垃圾分类指南，请各位业主下载指南并按规定投放垃圾。</p>
          <p class="notice-date">发布时间：2023-04-10 11:07:22</p>
        </div>

        <div class="notice-item">
          <p class="notice-title">美化家园行动：小区环境综合整治项目全面启动</p>
          <p>为响应城市美化号召，小区即日起开展为期一个月的环境整治行动，包括清理卫生死角、绿化补植、增设垃圾分类设施等，共同营造更加整洁美丽的居住环境。</p>
          <p class="notice-date">发布时间：2023-04-09 11:02:32</p>
        </div>

        <div class="notice-item">
          <p class="notice-title">小区智能安防系统升级通知</p>
          <p>为了提升小区的安全防护水平，物业将于近期对小区内的监控系统和门禁系统进行全面升级，引入人脸识别技术，提升出入管理效率与安全性。</p>
          <p class="notice-date">发布时间：2024-04-10 09:01:22</p>
        </div>
        <!-- 其他公告项依此类推 -->
      </div>
    </view>
  </view>
</template>

<script>

import {scoreAdd} from "../../../../api/exam/select";
import {removeToken} from "../../../../util/auth";
import Tabbar from "../../tabbar.vue";
import UDivider from "../../../../uni_modules/uview-ui/components/u-divider/u-divider.vue";

export default {
  components: {UDivider, Tabbar},
  props:{
    query:{typeName:''},
  },
  data() {
    return {
      list:"将于本月25日下午2:00举行消防演练，我们将对小区内的排水系统进行检修，请大家继续执行垃圾分类政策不要随意丢弃垃圾，请家中有小孩和老人的居民特别注意他们的安全",
    }
  },
  methods: {
    rightClick() {
      // 返回登录
      removeToken()
      uni.$u.toast('退出成功')
      setTimeout(()=>{
        uni.redirectTo({
          url:"/pages/exam/login"
        })
      },500)
    },
    typeName(){
      if (this.query && this.query.typeName) return this.query.typeName
      else return localStorage.getItem('userTypeName')
    },
    clickTab(e) {
      this.$emit('jumpTo',e)
    },
    startExam(){
      uni.showLoading({
        title: '正在加载题目'
      })
      scoreAdd().then(res=>{
        if (res.code==200){
          localStorage.setItem('firstTime',new Date(res.data.createTime).getTime());
          if (res.data.isFirst){// 第一次进入，就重新设置 dataList
            localStorage.removeItem("dataList")
          }
          // 保存全局变量，所有的都基于这个
          localStorage.setItem("envId",res.data.id)
          // uni.redirectTo({
          //   url:"/pages/exam/main"
          // })
          this.$root.$emit('getEmitter','/pages/exam/main')
        }else{
          uni.$u.toast('开始失败')
        }
      }).finally(res=>{
        uni.hideLoading()
      })
    },
    wrongView(){
      uni.$u.toast('暂未开发')
    }
  },
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    // this.$refs.uForm.setRules(this.rules)
  },
}
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

.container {
  background: linear-gradient(135deg, #6e8efb, #a777e3);
  height: 100%;
  font-family: 'Poppins', sans-serif;
  padding: 20rpx;
}
.notice-bar {
  background-color: rgba(255, 255, 255, 0.9);
  color: #333;
  border-radius: 20rpx;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20rpx;
  display: flex;
}


u-navbar {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.content {
  margin-top: 80rpx;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 20rpx;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  padding: 30rpx;
  margin: 20rpx;
}

.title-container {
  text-align: center;
  margin-bottom: 20rpx;
}

.title {
  font-size: 36rpx;
  font-weight: 600;
  color: #a777e3;
}

.grid-container {
  margin-top: 20rpx;
}

.grid-icon {
  color: #3c9cff;
}

.grid-text {
  margin-top: 10rpx;
  font-size: 28rpx;
  color: #333;
}

u-notice-bar {
  background-color: #fff;
  color: #333;
  border-radius: 20rpx;
  margin: 20rpx;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.notice-board{
  max-height: 240px;
}
.notice-content {
  margin-top: 80rpx;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 20rpx;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  padding: 20rpx;
  margin: 20rpx;
}
.notice-date{
  color: burlywood;
}
.notice-title{
  color: currentColor;
  font-weight: bold;
}
.notice-item{
  margin: 2rpx 2rpx;
  margin-bottom: 16rpx;
  padding: 18rpx;
  border: 1rpx solid #cccccc;
  border-radius: 14rpx;
  background: linear-gradient(135deg, #6e8efb44, #a777e344);
}
</style>
